import { useState } from "react";
import TagCard from "./TagsCard";

const tagsData = [
  {
    name: "javascript",
    description:
      "For questions about programming in ECMAScript (JavaScript/JS) and its different dialects.",
    totalQuestions: 2537902,
    daily: 63,
    weekly: 438,
  },
  {
    name: "python",
    description:
      "Python is a dynamically typed, multi-purpose programming language.",
    totalQuestions: 2223180,
    daily: 143,
    weekly: 850,
  },
  {
    name: "java",
    description: "Java is a high-level object-oriented programming language.",
    totalQuestions: 1924331,
    daily: 53,
    weekly: 332,
  },
  {
    name: "c#",
    description:
      "C# is a high-level, statically typed, multi-paradigm programming language.",
    totalQuestions: 1627937,
    daily: 43,
    weekly: 319,
  },
];

export default function TagsPage() {
  const [search, setSearch] = useState("");
  const filteredTags = tagsData.filter((tag) =>
    tag.name.includes(search.toLowerCase())
  );

  return (
    <div className="max-w-5xl mx-auto p-6">
      <h1 className="text-3xl font-bold">Tags</h1>
      <p className="text-gray-600 text-sm">
        A tag is a keyword that categorizes your question with similar
        questions.
      </p>
      <input
        type="text"
        className="border p-2 rounded w-full mt-4"
        placeholder="Filter by tag name"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
        {filteredTags.map((tag) => (
          <TagCard key={tag.name} tag={tag} />
        ))}
      </div>
    </div>
  );
}
